<template>
  <div class="contractType basic-from">
    <div class="card-box">
      <div class="card-title">工程信息</div>
      <el-form ref="engineering" :model="engineering" class="form-wrap" size="small" :rules="engineering_rules" label-position="top">
        <el-form-item label="工程名称" prop="projectName">
          <el-input v-halfCharCode readonly suffix-icon="el-icon-search" v-model="engineering.projectName" maxlength="100" placeholder="请输入工程名称" @click.native="handleClickProjectName" />
        </el-form-item>
        <el-form-item label="工程地址" prop="projectAddress">
          <el-input v-halfCharCode readonly v-model="engineering.projectAddress" maxlength="100" placeholder="请输入工程地址" />
        </el-form-item>
        <el-form-item label="工程类型" prop="projectType">
          <el-input v-halfCharCode readonly v-model="engineering.projectType" maxlength="100" placeholder="请输入工程类型" />
        </el-form-item>
      </el-form>
    </div>
    <div class="card-box">
      <div class="card-title">合同信息</div>
      <el-form ref="projectContract" :model="projectForm.projectContract" class="form-wrap" size="small" :rules="projectContract_rules" label-position="top">
        <el-form-item label="合同编号" prop="contractNum">
          <el-input v-halfCharCode v-model="projectForm.projectContract.contractNum" maxlength="50" placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-select clearable v-model="projectForm.projectContract.contractType" placeholder="请选择合同类型">
            <el-option v-for="item in contractTypes" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同金额(元)" prop="contractAmount">
          <el-input v-halfCharCode v-model="projectForm.projectContract.contractAmount" maxlength="18" placeholder="请输入合同金额" @blur="handleContractAmount" />
        </el-form-item>
        <el-form-item label="单价(元/m²)" prop="unitPrice">
          <el-input v-halfCharCode v-model="projectForm.projectContract.unitPrice" maxlength="18" placeholder="请输入单价" />
        </el-form-item>
        <el-form-item label="签订日期" prop="contractDate">
          <el-date-picker v-model="projectForm.projectContract.contractDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择签订日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="合同开始日期" prop="startDate">
          <el-date-picker v-model="projectForm.projectContract.startDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择合同开始日期" @change="handleChooseStartDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="合同结束日期" prop="endDate">
          <el-date-picker v-model="projectForm.projectContract.endDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择合同结束日期" @change="handleChooseEndDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="乙方单位名称" prop="partybUnit">
          <el-input v-halfCharCode v-model="projectForm.projectContract.partybUnit" maxlength="100" placeholder="请输入乙方单位名称" />
        </el-form-item>
        <el-form-item label="联系人" prop="partybContact">
          <el-input v-halfCharCode v-model="projectForm.projectContract.partybContact" maxlength="100" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="partybPhone">
          <el-input v-halfCharCode v-model="projectForm.projectContract.partybPhone" maxlength="100" placeholder="请输入手机或座机号码" />
        </el-form-item>
        <el-form-item label="是否有补充协议" prop="supplement">
          <el-select clearable v-model="projectForm.projectContract.supplement" @change="changeSupplement" placeholder="请选择合同类型">
            <el-option v-for="item in supplements" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补充协议签订日期" prop="signDate" v-if="projectForm.projectContract.supplement === '1'">
          <el-date-picker v-model="projectForm.projectContract.signDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择合同结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="补充协议期限" prop="suppleStart" v-if="projectForm.projectContract.supplement === '1'">
          <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="projectForm.projectContract.suppleStart" format="yyyy-MM-dd" valueFormat="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="补充协议金额(元)" prop="suppleAmount" v-if="projectForm.projectContract.supplement === '1'">
          <el-input v-halfCharCode v-model="projectForm.projectContract.suppleAmount" maxlength="18" placeholder="请输入补充协议金额" @blur="handleSuppleAmount" />
        </el-form-item>
        <el-form-item label="意见" class="full" prop="remarks">
          <el-input v-halfCharCode v-model="projectForm.projectContract.remarks" maxlength="200" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>
    <div class="card-box" v-if="projectForm.projectContract.supplement === '1'">
      <div class="card-title">补充协议</div>
      <div class="handling-opinions">
        <v-upload
          ref="supplementaryUpload"
          :busId="projectForm.projectContract.projectContractId"
          modelType="supplementary"
          @onSuccess="supplementarySuccess"
          @loadCompleted="supplementaryLoadCompleted"
          isShowFileList
          :isView="false"
          multiple
          v-model="supplementaryFileList"
        />
      </div>
    </div>
    <div class="card-box">
      <div class="card-title">附件</div>
      <div class="handling-opinions">
        <v-upload
          ref="normalUpload"
          :busId="projectForm.projectContract.projectContractId"
          modelType="normal"
          @onSuccess="onSuccess"
          @loadCompleted="normalLoadCompleted"
          isShowFileList
          :isView="false"
          multiple
          v-model="fileList"
        />
      </div>
    </div>
    <div class="card-box">
      <div class="card-title">
        子合同信息
        <span>
          <el-button size="mini" type="primary" @click="superInforAdd">添加</el-button>
        </span>
      </div>
      <div style="padding-top:10px">
        <el-table :data="projectForm.subContracts" align="left">
          <el-table-column prop="contractNum" label="合同编号" width="120" />
          <el-table-column prop="contractType" label="合同类型" width="120">
            <template slot-scope="scope">
              <span>{{getCardTypeValue(scope.row.contractType,contractTypes)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractDate" label="签订日期" width="120" />
          <el-table-column prop="contractAmount" label="合同金额（元）" width="120" />
          <el-table-column prop="partybUnit" label="乙方单位名称" width="120" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClickEdit(scope)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, projectForm.subContracts)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="card-box">
      <div class="handling-commit">
        <el-button type="primary" plain class="btn" v-throttle="[commit]">保存</el-button>
      </div>
    </div>
    <!--        工程弹框-->
    <choose-dialog ref="chooseDialog" v-bind="chooseDialogAttrs" @chooseData="handleClickAdd" />
    <subContract ref="subContract" @handleDialogsSave="handleDialogsSave" @handleClose="handleClose" v-if="editDataShow" @beforeClose="handleClose" />
  </div>
</template>

<script src="./edit-data.js">

</script>

<style scoped lang='scss'>
.contractType {
  .card-box {
    margin: 24px 24px 0;
    overflow: hidden;
    .handling-opinions {
      padding: 20px;
      .btn {
        margin: 10px;
        float: right;
      }
    }
    .btn {
      float: right;
    }
  }
}
</style>
